<template>
  <div id="sheet-list">
    <div class="sheet-header" @click="toggleSheet">
      <li class="sheet-header-span">{{data_item.Title}} </li>
    </div>
    <div v-if="showSheets" class="sheet-content" >
      <p>{{data_item.Detail}}</p>
    </div>
  </div>
</template>


<script>
export default {
  components: {},
  props: {
    item: {
      type: Object
    }
  },
  data() {
    return {
      showSheets: false,
      data_item: {}
    };
  },
  methods: {
    toggleSheet() {
      this.showSheets = !this.showSheets;
    }
  },
  created() {
    this.data_item = this.item;
  }
};
</script>


<style scoped>
#sheet-list {
  clear: both;
}
.sheet-header {
  height: 40px;
  background: white;
  position: relative;
  border-bottom: 1px solid #cccccc;
  display: flex;
  justify-content: center;
  align-items: center;
}
.sheet-header-span {
  left: 40px;
  font-size: 14px;
  position: absolute;
  line-height: 30px;
}
.sheet-content {
  position: relative;
  width: 100%;
  display: flex;
}
</style>
